<template>
	<div class="leave">
		<div class="head">
			<h2>详情</h2>
			<h2 @click="goBack" style="cursor: pointer">返回</h2>
		</div>

		<div class="detailform">
			<el-form ref="myForm" :model="formData" class="form">
				<el-form-item label="申 请 人:" prop="userName">
					<p>{{ formData.userName }}</p>
				</el-form-item>

				<el-form-item label="请 假 类:" prop="typeName">
					<p>{{ formData.leaveType }}</p>
				</el-form-item>

				<el-form-item label="请 假 时 间:">
					<p class="qingjia">
						<span>{{ formData.leaveStarttime }}</span>
						<span>-</span>
						<span>{{ formData.leaveEndtime }}</span>
					</p>
				</el-form-item>

				<el-form-item label="审 批 人:" prop="userId">
					<p>{{ formData.userId }}</p>
				</el-form-item>

				<el-form-item label="审 批 状 态:" prop="leaveStatus">
					<p v-model="formData.leaveStatus" v-if="formData.leaveStatus == '未审核'">未审核</p>
					<p v-model="formData.leaveStatus" v-if="formData.leaveStatus == '审核通过'">审核通过</p>
					<p v-model="formData.leaveStatus" v-if="formData.leaveStatus == '未通过审核'">未通过审核</p>
				</el-form-item>

				<el-form-item label="请 假 原 因:" prop="leaveReason">
					<p>{{ formData.leaveReason }}</p>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			baseUrl: require("../js/baseUrl").baseUrl,
			formData: {
				userName: '',
				typeId: '',
				leaveType: '',
				userId: '',
				leaveStarttime: '',
				leaveEndtime: '',
				leaveStatus: '',
				leaveReason: '',
			}
		}
	},
	methods: {
		goBack() {//返回上一级
			this.$router.go(-1)
		},
		// Time() {
		// 	this.formData.startTime = this.formData.startTime.substring(0, 10)
		// 	this.formData.endTime = this.formData.endTime.substring(0, 10)
		// },
		getDetails() {
			//接口	SchoolSys/uloa/selectOneById
			this.$http.post(this.baseUrl + "Leave/LeaveInfo", {
				leaveId: this.leaveId,
			}).then(res => {
				console.log(res)
				if (res.data.code == 200) {
					this.formData = res.data.data
					// this.Time()
				}
			})
		}
	},
	mounted() {
		this.leaveId = this.$route.query.leaveId
		this.formData.username = sessionStorage.getItem("userName")
		this.formData.leaveId = sessionStorage.getItem("leaveId")
		this.getDetails()
	}
}	
</script>

<style>
.head {
	margin: 40px 20px 0 40px;
	display: flex;
	justify-content: space-between;
}

.head h2 {
	font-size: 28px;
	color: #333;
}

.head a {
	font-size: 18px;
	color: #333;
	text-decoration: none;
	font-weight: bolder;
}

.btn2 {
	width: 98px;
	height: 50px;
	color: #fff;
	font-size: 20px;
	border-radius: 4px;
}

.detailform .form {
	margin-top: 3%;
	display: flex;
	flex-wrap: wrap;
}

.detailform .form p {
	width: 370px;
	height: 40px;
	background-color: #fff;
	border: 1px solid #999;
	padding: 0 15px;

}

.detailform .el-form-item {
	width: 50%;
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 25px;
}

.detailform .el-form-item__content {
	width: 400px;
}

.detailform .el-date-editor.el-input,
.el-date-editor.el-input__inner {
	width: 400px;
}

.detailform .el-select {
	width: 400px;
}

.detailform .el-form-item__label {
	font-size: 19px;
	font-weight: bolder;
	text-align: left;
	width: 111px;
	color: #333;
}

.detailform .qingjia {
	width: 370px;
	height: 40px;
	background-color: #fff;
	border: 1px solid #DCDFE6;
	border-radius: 4px;
	padding: 0 15px;
}

.detailform .qingjia span {
	margin: 0 5px;
}
</style>